<template>
	<view class="addstaffbox">
		<view class="item">
			<text class="item__label">套餐名称</text>
			<view class="item__content"><input class="item__content__main" type="text" value="" v-model="params.title" placeholder="请输入商品名称" /></view>
		</view>
		<view class="item">
			<text class="item__label">平台价格</text>
			<view class="item__content item__content--has-flag">
				<input class="item__content__main" type="text" value="" v-model="params.plat_price" placeholder="请输入平台价格(元)" />
				<text class="item__content__currency">元</text>
			</view>
		</view>
		<view class="item">
			<text class="item__label">门市价格</text>
			<view class="item__content item__content--has-flag">
				<input class="item__content__main" type="text" value="" v-model="params.price" placeholder="请输入门市价格(元)" />
				<text class="item__content__currency">元</text>
			</view>
		</view>
		<view class="item"><text class="item__label">套餐图片</text></view>
		<view class="imgBox">
			<view class="imgbox">
				<imageUpload @onUploadChange="handleChooseImage" :uploadType="'identify'" :type="'md'" :cdn="true" :prop_photos="images" />
			</view>
			<!-- <view class="chooseImage chooseImage2 flex-y-center" v-if="image.length < 3" @click="uploadImg()">
				<text class="chooseImage__icon iconfontPT icontianjia block"></text>
			</view> -->
		</view>

		<!-- 	<view class="item">
			<text>商品图片</text>
		</view>
		<view class="imgBox">
			<view class="imgbox">
				<image :src="`${host}/${item}`" v-for="(item,index) in image" :key='index' mode="scaleToFill"></image>
			</view>
			<view class="chooseImage chooseImage2 flex-y-center" v-if="image.length < 3" @click="uploadImg()">
				<text class="iconfontPT iconadd block"></text>
			</view>
		</view> -->

		<view class="item">
			<text class="item__label">套餐内容</text>
			<view @click="addgood" class="item__content">
				<view class="item__content__main">
					<block v-if="name === ''">点击添加套餐</block>
					<block v-else>
						<text class="item__content__main__label" v-for="(item, index) in name" :key="index">{{ item }}</text>
					</block>
				</view>
				<text class="item__content__icon iconfontPT iconxiayibu"></text>
			</view>
		</view>
		<view class="item">
			<text class="item__label">使用规则</text>
			<view @click="useRule" class="item__content">
				<text class="item__content__main">{{ params.s_time }} <block v-if="params.s_time">-</block> {{ params.e_time }}</text>
				<text class="item__content__icon iconfontPT iconxiayibu" style="float: right;"></text>
			</view>
		</view>
		<view class="item">
			<text class="item__label">是否推荐</text>
			<view class="item__content item__content--row-right"><switch @change="switchChange" /></view>
		</view>
		<view class="add" @click="add"><text>确定</text></view>
	</view>
</template>

<script>
import { addGoods, getGoodsInfo, editGoods } from '../../../apis/shop/api.js';
import imageUpload from '../../components/public/image-upload.vue';

export default {
	data() {
		return {
			current: 0,
			username: '',
			password: '',
			image: [],
			images: [],
			name: '',
			params: {
				package: '',
				s_time: '',
				e_time: '',
				s_hour: '',
				e_hour: '',
				content: '',
				is_recomend: '',
				is_package: true
			},
			store_id: '',
			token: '',
			isEdit: false
		};
	},
	components: {
		imageUpload
	},
	computed: {
		host() {
			return this.$baseHost.car;
		}
	},
	onLoad(option) {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		if (option.id != undefined) {
			this.isEdit = true;
			this.id = option.id;
			this.getGoodsInfo(option.id);
		}
	},
	onShow: function() {
		var that = this;
		var pages = getCurrentPages();
		var currPage = pages[pages.length - 1]; //当前页面
		let userdata = currPage.data;
		if (userdata.userdata && userdata.userdata.choosename) {
			console.log(currPage.data.userdata);
			that.name = currPage.data.userdata.choosename;
			console.log(that.name, 'onShow');
			that.params.package = currPage.data.userdata.chooseid.join(',');
		}
		if (userdata.userdata && userdata.userdata.time1) {
			that.params.s_time = currPage.data.userdata.time1;
			that.params.e_time = currPage.data.userdata.time2;
			that.params.s_hour = currPage.data.userdata.time3;
			that.params.e_hour = currPage.data.userdata.time4;
			that.params.content = currPage.data.userdata.content;
		}
	},
	methods: {
		handleChooseImage(item, list) {
			this.images = list;
		},
		
		add() {
			console.log(this.images);
			if (this.images.length > 0) {
				this.params.img = this.images.join(',');
				this.params.store_id = this.store_id;
				this.params.token = this.token;
				if (!this.isEdit) {
					addGoods(this.params).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '添加成功'
							});
							let pages = getCurrentPages(); // 当前页面
							let prePage = pages[pages.length - 2]; // 前一个页面
							prePage.setData({
								//把需要回传的值保存到上一个页面
								isDoRefesh: true
							});
							uni.navigateBack();
						}
					});
				} else {
					editGoods(this.params).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '修改成功'
							});
							let pages = getCurrentPages(); // 当前页面
							let prePage = pages[pages.length - 2]; // 前一个页面
							prePage.setData({
								//把需要回传的值保存到上一个页面
								isDoRefesh: true
							});
							uni.navigateBack();
						}
					});
				}
			} else {
				uni.showToast({
					title: '图片不能为空',
					icon: 'none'
				});
			}
		},
		switchChange(e) {
			this.params.is_recomend = e.target.value ? 1 : 0;
		},
		useRule() {
			uni.navigateTo({
				url: '/pages/shopmanager/meal/userule'
			});
		},
		getGoodsInfo(id) {
			let that = this;

			getGoodsInfo({
				id: id,
				token: that.token
			}).then(res => {
				if (res.code === 1) {
					that.params = res.data;
					res.data.img.split(',').forEach(item => {
						that.image.push(item);
						that.images.push(item);
					});
					that.name = [];
					for (var i in res.data.package_list) {
						that.name.push(res.data.package_list[i]);
					}
					// that.name = that.name.join(',');
					console.log(that.name, 'getGoodsInfo');
					that.params.s_time = res.data.rule.s_time;
					that.params.e_time = res.data.rule.e_time;
					that.params.s_hour = res.data.rule.s_hour;
					that.params.e_hour = res.data.rule.e_hour;
					that.params.content = res.data.rule.content;
				}
			});
		},
		uploadImg(key) {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['copressed'],
				success(res) {
					var imgFiles = res.tempFilePaths[0];
					console.log(imgFiles);
					var uper = uni.uploadFile({
						url: that.$baseHost.car+'/api/common/upload',
						filePath: imgFiles,
						name: 'file',
						success(res) {
							if (res.statusCode == 200) {
								that.image.push(JSON.parse(res.data).data.url);
								that.images.push(JSON.parse(res.data).data.url);
							}
							console.log(that.image);
						}
					});
				}
			});
		},
		addgood() {
			uni.navigateTo({
				url: '/pages/shopmanager/meal/chooseGood'
			});
		}
	}
};
</script>

<style lang="less">
.chooseImage {
	width: 220rpx;
	height: 220rpx;
	background-color: #f8f8f8;
	font-size: 24rpx;
	color: #c5c5c5;
	position: relative;

	&__icon {
		font-size: 80rpx;
		color: #ccc;
	}

	&.chooseImage2 {
		width: 220rpx;
		height: 220rpx;
	}

	image {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}

.imgBox {
	width: 100%;
	min-height: 240rpx;
	padding: 10rpx 0;
	border-bottom: 1rpx solid rgba(199, 190, 190, 0.5);
	display: flex;

	.imgbox {
		display: flex;
	}
}

.addstaffbox {
	padding: 0 30rpx;

	.item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		& + .item {
			border-top: 1rpx solid rgba(199, 190, 190, 0.5);
		}

		&__label {
			display: block;
			width: 140rpx;
			text-align: left;
			margin-right: 40rpx;
		}

		&__content {
			flex: 1;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&--row-right {
				justify-content: flex-end;
			}

			.imgbox {
				image {
					width: 163rpx;
					height: 141rpx;
				}
			}

			&__main {
				color: #999;
				font-size: 26rpx;

				&__label {
					border: 1px solid #ffb8b1;
					border-radius: 8rpx;
					background-color: #fff8f8;
					margin: 0 20rpx 10rpx 0;
					padding: 4rpx 10rpx;
					color: #e41805;
					font-size: 20rpx;
					display: inline-block;
				}
			}

			switch {
				float: right;
			}

			&__currency,
			&__icon {
				// position: absolute;
				// right: 0;
				// bottom: 0;
			}

			&__currency {
				color: #333;
			}
		}
	}

	.login {
		background-color: #e41805;
		color: #fff;
		font-size: 30rpx;
		line-height: 84rpx;
		margin-top: 30rpx;
		text-align: center;
		border-radius: 5px;
	}
}

.add {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
	background-color: #fff;

	text {
		display: block;
		padding: 20rpx 0;
		background-color: #e41805;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}
}
</style>
